<template>
    <div style="background: #fff; width: 100%; height: 100%">
        <div style="padding: 0 15px; margin-top: 10px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="人员管理" name="people">
                    <div style="margin-left: 15px; margin-bottom: 20px">
                        <el-button type="primary" @click="add">添加</el-button>
                    </div>
                    <div style="padding: 0 15px">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column fixed prop="deptId" label="人员ID"> </el-table-column>
                            <el-table-column fixed prop="userType" label="人员类型"> </el-table-column>
                            <el-table-column fixed prop="userName" label="用户名"> </el-table-column>
                            <el-table-column fixed prop="phone" label="手机号"> </el-table-column>
                            <el-table-column fixed prop="PeopleStatus" label="状态">
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        {{ scope.row.status == 0 ? '正常' : '停用' }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column fixed prop="createTime" label="添加时间">
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        {{ getTime(scope.row.createTime) }}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column fixed="right" label="操作" width="180">
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        <el-button type="text" size="small">人员权限</el-button>
                                        <el-button type="text" size="small">停用</el-button>

                                        <el-button type="text" size="small">编辑</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px; display: flex; justify-content: flex-end">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-sizes="[10, 20, 50, 100]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">
                    <div style="padding: 0 15px">
                        <el-table :data="tableData" border>
                            <el-table-column fixed prop="remark" label="系统角色"> </el-table-column>
                            <el-table-column fixed prop="PeopleTime" label="更新时间">
                                <!-- createTime -->
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        {{ getTime(scope.row.createTime) }}
                                    </div>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column fixed prop="System" label="权限"> </el-table-column> -->

                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <div style="display: flex">
                                        <el-button type="text" size="small">角色权限</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <addAccount ref="addAccount" @gitlist="getlist()"></addAccount>
    </div>
</template>

<script>
import request from '@/utils/request';
import addAccount from './component/addAccount.vue';
import { getListTime } from '@/utils/Time';
export default {
    methods: {
        handleClick(row) {
            console.log(row);
            this.pageSizes = 10;
            this.pageNum = 1;
            this.getlist();
        },
        handleSizeChange(e) {
            console.log(e);
        },
        handleCurrentChange(e) {
            console.log(e);
        },
        // 添加
        add() {
            this.$refs.addAccount.dialogFormVisible = true;
            this.$refs.addAccount.echo();
        },
        getlist() {
            if (this.activeName == 'people') {
                request({
                    url: '/admin/sys-user/v1/list',
                    method: 'post',
                    params: {
                        pageSizes: this.pageSizes,
                        pageNum: this.pageNum
                    }
                }).then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.current_data;
                    this.total = res.total_record;
                });
            } else {
                request({
                    url: '/admin/sys-user-role/v1/list',
                    method: 'post'
                }).then((res) => {
                    console.log(res);
                    this.tableData = res.data;
                });
            }
        },
        getTime(e) {
            if (!e) {
                return '';
            }
            return getListTime(e);
        }
    },
    mounted() {
        this.getlist();
    },
    data() {
        return {
            tableData: [
                {
                    PeopleId: '1',
                    PeopleType: '管理员',
                    peopleName: 'admin',
                    PeoplePhoneNumber: '17895510596',
                    PeopleStatus: '启用',
                    PeopleTime: '2021-1-2'
                }
            ],
            tableData2: [
                {
                    PeopleId: '1',
                    PeopleType: '管理员',
                    peopleName: 'admin',
                    PeopleTime: '2021-1-2',
                    System: 'All'
                }
            ],

            QueryInfo: {
                OrderType: '',
                OrderNumber: '',
                OrderJob: '',
                OrderMoney1: '',
                OrderMoney2: '',
                OrderStatus: '',
                BeginTime: '',
                TakeordersTime: '',
                CompletionTime: '',
                Earlywarning: '',
                Shelves: '',
                UserName: '',
                UserPhone: ''
            },
            OrderType: [
                {
                    value: '1',
                    label: '剪辑'
                }
            ],
            OrderStatus: [
                {
                    value: '1',
                    label: '待审核'
                },
                {
                    value: '1',
                    label: '已发布待接单'
                },
                {
                    value: '1',
                    label: '已接单'
                },
                {
                    value: '1',
                    label: '已完成'
                }
            ],
            // 是、正常
            Earlywarning: [
                {
                    value: '1',
                    label: '是'
                },
                {
                    value: '2',
                    label: '正常'
                }
            ],
            Shelves: [
                {
                    value: '1',
                    label: '上架'
                },
                {
                    value: '2',
                    label: '下架'
                }
            ],
            activeName: 'people',
            pageSizes: 10,
            pageNum: 1,
            total: 0
        };
    },
    components: {
        addAccount
    }
};
</script>
<style scoped>
.QueryList {
    display: flex;
    padding-left: 30px;
}

.QueryItem {
    display: flex;
    height: 80px;
    width: 260px;
    align-items: center;
    white-space: nowrap;
    margin-right: 25px;
}
</style>